<template>
  <div>
    <van-nav-bar
        title="编辑资料"
        fixed
        left-arrow
        @click-left="goBack()"
    />

    <div style="padding: 8vh 0 0 0">


      <van-form @submit="onSubmit">

        <van-field
            v-model="user.account"
            name="account"
            label="账号"
            placeholder="请输入账号"
            disabled
            :rules="[{ required: true, message: '请填写用户名' }]"
        />

        <van-field name="profileImg" label="头像">
          <template #input>
            <van-uploader v-model="user.profileImg" :max-count="1" :after-read="afterReadPro"/>
          </template>
        </van-field>

        <van-field
            v-model="user.name"
            name="name"
            label="昵称"
            placeholder="请输入昵称"
            :rules="[{ required: true, message: '请输入昵称' }]"
        />

        <van-field
            readonly
            clickable
            name="location"
            :value="user.location"
            label="地区"
            placeholder="点击选择省市区"
            @click="form.showArea = true"
        />
        <van-popup v-model="form.showArea" position="bottom">
          <van-area
              :area-list="form.areaList"
              @confirm="onConfirm"
              @cancel="form.showArea = false"
          />
        </van-popup>

        <van-field name="gender" label="性别"
                   :rules="[{ required: true, message: '请输入性别' }]">
          <template #input>
            <van-radio-group v-model="user.gender" direction="horizontal">
              <van-radio :name="0">男</van-radio>
              <van-radio :name="1">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-field
            v-model="user.profileText"
            rows="2"
            autosize
            name="profileText"
            label="个性签名"
            type="textarea"
            maxlength="120"
            placeholder="请输入个性签名"
            show-word-limit
        />

        <van-field name="backgroundImg" label="背景图片">
          <template #input>
            <van-uploader v-model="user.backgroundImg" :max-count="1" :after-read="afterReadBack"/>
          </template>
        </van-field>

        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>

    </div>
  </div>
</template>

<script>
import {areaList} from '@vant/area-data';

export default {
  data() {
    return {
      form: {
        showArea: false,
        areaList,
      },

      user: {
        id: "",
        account: "",
        backgroundImg: [{
          url: "",
        }],
        gender: 0,
        location: "",
        name: "",
        profileImg: [{
          url: "",
        }],
        profileText: "",
      },
			headImg: '',
			backImg: '',
    }
  },
  mounted() {
    this.userDetail();

  },
  methods: {
    afterReadPro(file) {
      this.afterRead(file, true);
    },
    afterReadBack(file) {
      this.afterRead(file, false);
    },
    /**
     *
     * @param file
     * @param type true-头像,false-背景图片
     */
    afterRead(file, type) {
      // 此时可以自行将文件上传至服务器
      let formData = new FormData()
      formData.append("file", file.file)
      this.http.post("/api/phx/file/upload", formData).then((res) => {
				console.log('res', res)
        let url = res.data.data
        if (type) {
          this.user.profileImg[0].url = url
					this.headImg = url
        } else {
          this.user.backgroundImg[0].url = url
					this.backImg = url
        }
      })
    },
    onConfirm(values) {
      this.user.location = values
          .filter((item) => !!item)
          .map((item) => item.name)
          .join('/');
      this.form.showArea = false;
    },
    onSubmit(values) {
			console.log('back', this.user.backgroundImg)
			console.log('pro', this.user.profileImg)
			console.log('this.headImg', this.headImg)
			console.log('this,backImg', this.backImg)
      this.http.post("/api/phx/user/update", {
        backgroundImg: this.backImg,
        profileImg: this.headImg,
        gender: values.gender,
        location: values.location,
        name: values.name,
        profileText: values.profileText,
      }).then((res) => {
        this.goBack();
      })
    },
    goBack() {
      this.$router.go(-1);
    },
    userDetail() {
      this.http.get("/api/phx/user/detail?userId=").then((res) => {
        let temp = res.data.data;
        this.user.backgroundImg = !temp.backgroundImg ? [] : [{
          url: temp.backgroundImg
        }];
        this.user.account = temp.account;
        this.user.id = temp.id;
        this.user.name = temp.name;
        this.user.gender = temp.gender;
        this.user.location = temp.location;
        this.user.profileImg = !temp.profileImg ? [] : [{
          url: temp.profileImg
        }];
        this.user.profileText = temp.profileText;
				this.backImg = temp.backgroundImg;
				this.headImg = temp.profileImg;
      });
    },
  },
};
</script>

<style lang="scss" scoped>

</style>